<template>
    <div>
      <div>
        <chart id="myChart" :noData="noData" :chartStyle="chartStyle ? chartStyle : 'min-height:230px;height:300px'" :option="dataOption"/>
      </div>
    </div>
</template>
<script>
import chart from "./newChart";
import echarts from "echarts";
import _ from "lodash";
/*
单个bar图表
value:[{
    name:'',
    value:'',
    barWidth:'24',//bar宽度
    barGrap:'21',//bar间距
    color:[],
}]
option:{ //echart 的 option
    legendArr:['',''] //如果有legend ,按照顺序传入 legend 名字
    exchange:false,///xy轴互换
    color:"",柱状图label的颜色
    barBorderRadius: [0,0,0,0]  柱状图的圆角
    startColor:'',
    endColor:'',
    showLabel,
    positionLabel: right 
}
*/
const lineColor = [
  {
    startColor: "#00d1ff",
    endColor: "#0c43fd"
  },
  {
    startColor: "#af4cfd",
    endColor: "#6937fd"
  },
  {
    startColor: "#da34fb",
    endColor: "#6937fd"
  }
];
export default {
  props: {
    value: {
      type: Array,
      default: () => {
        return [];
      }
    },
    option: {
      type: Object,
      default: () => {
        return {};
      }
    },
    chartStyle: {
      type: String, // 自定义图表宽高
      default: () => {
        return "";
      }
    }
  },
  components: {
    chart
  },
  data() {
    return {
      noData: false,
      dataOption: {}
    };
  },
  watch: {
    value(newValue, oldValue) {
      this.noData = false;
      if (this.value && this.value.length > 0) {
        this.noData = false;
        this.setOption(newValue);
      } else {
        this.$set(this, "noData", true);
        return;
      }
    }
  },
  methods: {
    setOption(res) {
      const data = {
        chart: res
      };

      const xAxisMonth = [];
      const barData = [];
      const lineData = [];
      for (let i = 0; i < data.chart.length; i++) {
        xAxisMonth.push(data.chart[i].name);
        barData.push({
          name: xAxisMonth[i],
          value: data.chart[i].value
        });
        lineData.push({
          name: xAxisMonth[i],
          value: data.chart[i].ratio
        });
      }
      var option = {
        title: "",
        grid: {
          top: 20,
          left: 20,
          bottom: "6%",
          containLabel: true
        },
        // tooltip: {
        //   trigger: "axis",
        //   axisPointer: {
        //     type: "none"
        //   },
        //   formatter: function(params) {
        //     return (
        //       params[0].name + "<br/>" + "离职率: " + params[0].value + "%"
        //     );
        //   }
        // },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "none"
          },
          formatter: params => this.$utils.formatterLine(res, params, "%")
        },
        xAxis: [
          {
            type: "category",
            show: false,
            data: [],
            axisLabel: {
              textStyle: {
                color: "#29AAE1"
              }
            }
          },
          {
            type: "category",
            position: "bottom",
            data: xAxisMonth,
            boundaryGap: true,
            // offset: 40,
            axisTick: {
              show: false
            },
            axisLine: {
              show: true
            },
            axisLabel: {
              textStyle: {
                color: "#29AAE1"
              }
            }
          }
        ],
        yAxis: [
          {
            show: true,
            offset: 10,
            splitLine: {
              show: true,
              lineStyle: {
                color: "rgba(41,170,225,0.1)"
              }
            },
            axisTick: {
              show: true
            },
            axisLine: {
              show: true
            },
            axisLabel: {
              show: true,
              color: "#29AAE1",
              formatter: "{value}%"
            }
          },
          {
            // 右边Y轴标尺线
            show: false,
            type: "value",
            name: "业务量",
            nameTextStyle: {
              color: "#ccc"
            },
            axisLabel: {
              color: "#ccc"
            },
            splitLine: {
              show: false
            },
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            }
          }
        ],
        color: ["rgba(41, 170, 225, 0.8)"],
        series: [
          {
            name: "",
            type: "pictorialBar",
            xAxisIndex: 1,
            barCategoryGap: "-20%",
            // barCategoryGap: '-5%',
            symbol: "path://d='M150 50 L130 130 L170 130  Z'",
            // label: {
            //   show: true,
            //   position: "top",
            //   color: "#1798ff"
            //   // fontSize: 22
            // },
            // itemStyle: {
            //   normal: {
            //     color: function(params) {
            //       const colorList = ["rgba(41, 170, 225, 0.8)"];
            //       return colorList[params.dataIndex];
            //     }
            //   },
            //   emphasis: {
            //     opacity: 1
            //   }
            // },
            data: barData
          }
        ]
      };
      var allOption = _.merge(option, this.option);
      this.$set(this, "dataOption", allOption);
    }
  }
};
</script>